<template>
	<view class="container">
		<!-- 培训列表 -->
		<view class="training-list">
			<!-- 培训项目 -->
			<view class="training-card" v-if="itineraryData">
				<view class="card-header">
					<image
						:src="itineraryData.course_img || 'https://today.eapchina.net/upload/Image/mrtp/3105829360.jpg'"
						class="training-thumb" mode="aspectFill"></image>
					<view class="card-content">
						<view class="title-row">
							<text class="title">培训项目</text>
							<van-tag type="primary" class="status-badge">进行中</van-tag>
						</view>
						<view class="date-row" v-if="itineraryData.addtime">
							<van-icon name="underway" color="#1989fa" size="14" />
							<text class="date-text">{{formatDate(itineraryData.addtime)}}</text>
						</view>
						<text class="desc" v-if="itineraryData.adduser">创建人：{{itineraryData.adduser}}</text>
					</view>
				</view>

				<view class="card-actions">
					<van-button type="primary" block size="small" @click="openSignIn" class="action-btn">
						<van-icon name="passed" />
						<text>签到打卡</text>
					</van-button>
					<van-button type="success" block size="small" color="#1989FA" @click="handleFeedback(itineraryData.id)"
						class="action-btn2">
						<van-icon name="comment" />
						<text>培训反馈</text>
					</van-button>
					<van-button plain block size="small"  color="#1989FA"@click="showDetail" class="action-btn">
						<van-icon name="info" />
						<text>了解详情</text>
					</van-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		itinerary
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				id: "",
				itineraryData: null
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.onitinerary()
		},
		methods: {
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
			},
			// 获取项目列表
			onitinerary() {
				let data = {
					projectId: this.id,
				}
				itinerary(data).then(res => {
					if (res.state === 'ok') {
						this.itineraryData = res.data;
					}
				})
			},
			openSignIn() {
				uni.navigateTo({
					url: '/pages/student/signIn'
				});
			},
			handleFeedback(id) {
				uni.navigateTo({
					url: `/pages/student/evaluate?id=${id}`
				})
			},

			showDetail() {
				uni.setStorageSync("itineraryData", this.itineraryData)
				uni.navigateTo({
					url: "/pages/student/trainingListContent"
				});
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
			'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
			'Noto Color Emoji';
		background-color: #f8fafc;
		color: #1e293b;
	}

	.container {
		max-width: 100%;
		padding: 16px;
	}

	/* 培训卡片样式 */
	.training-card {
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 24px;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.training-card:active {
		transform: translateY(-4px);
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.card-header {
		padding: 20px;
		display: flex;
		align-items: flex-start;
		border-bottom: 1px solid #f1f5f9;
	}

	.training-thumb {
		width: 96px;
		height: 96px;
		border-radius: 12px;
		object-fit: cover;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	}

	.card-content {
		flex: 1;
		margin-left: 16px;
	}

	.title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 4px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
	}

	.status-badge {
		font-size: 12px;
		letter-spacing: 0.025em;
	}

	.date-row {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #64748b;
		margin-bottom: 12px;
	}

	.date-text {
		margin-left: 6px;
	}

	.desc {
		font-size: 14px;
		color: #475569;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 卡片操作按钮 */
	.card-actions {
		padding: 12px 20px;
		background-color: #f8fafc;
		display: flex;
		gap: 12px;
		justify-content: center;
	}

	.action-btn {
		transition: all 0.2s ease;
	}

	.action-btn:active {
		transform: translateY(-1px);
	}

	/* Vant按钮自定义样式 */
	.van-button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.van-button__content {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.van-button--plain {
		background-color: #fff !important;
	}
	.action-btn2{
		background-color: #1989FA;
	}
</style>